<template>
    <div class="ys-personcell">
        <div>
            <ul>
                <li v-for="(item,index) in perList" :id="'itemId'+index" class="page-infinite-listitem flex-layout" :class="{'item-active': (index == rowNo-1)}"
                    @click="goOtherHomePage(index)">
                    <div class="ranking" :class="{['top-three-ranking' + index]:item.isTopThree}">{{index + 1}}</div>
                    <Avatar :avatar="item.avatar" :name="item.name"></Avatar>
                    <div class="person-info flex">
                        <div class="name">{{item.name}}</div>
                        <div class="depName">{{item.depName}}</div>
                    </div>

                    <span class="walking-number" :class="{'top-three':item.isTopThree}">{{item.formatStep || item.stepCount}}</span>
                    <div class="like" @click.stop = 'giveLike(index)'  :class = "{'liked':item.isUpVote}">
                        <span>{{item.upVote}}</span>
                        <div> <i class="iconfont icon-heart"></i></div>
                    </div>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </p>
        </div>
    </div>
</template>

<script type="text/babel">
    import util from '../assets/util'
    import config from '../assets/config.js'
    import Avatar from './ys-avatar.vue';

    export default {
        data() {
            return {
                loading: false,
                allLoaded: false,
                wrapperHeight: 0,
                rowNo: 0,
                isFinished:false,
                perList:[],
                pageInfo: {
                    page: 1,
                    size: 10
                },
                upVoteUrl: config.host + config.upVoteUrl

            };
        },

        props:{
            perUrl:String,
            date:{
                type:String,
                default:util.formatDate(null, '-')
            }
        },

        created(){
        },
        activated(){
            this.init();
        },
        methods: {
            init() {

                this.loading = true;

                this.initPerData();
            },

            initPerData(){
                let me = this;
                this.pageInfo.page = 1;
                let params = this.pageInfo;
                params.date = this.date;
                if(this.depId) {
                    params.depId = this.depId;
                }

                let urlParams = util.unparam(location.search);
                if(urlParams.fid){
                    params.fid = urlParams.fid;
                }

                this.$http.get(this.perUrl, {
                    params
                }).then((res)=>{
                    let list = res.data.pageInfo ? res.data.pageInfo.list : res.data.list;
                    this.rowNo = res.data.rowNo;
                    this.loading = false;
                    this.formatPerStep(list);
                    this.perList = list;
                    this.findOtherPosition();
                    let length = this.perList.length;
                    if(length < this.pageInfo.size) {
                        this.$eventBus.$emit('loadComplete:person');
                        this.isFinished = true;
                        this.loading = false;
                    } else {
                        this.isFinished = false;
                        this.pageInfo.page ++;
                    }

                    if(length) {
                           this.$eventBus.$emit('firstPer', list[0]);
                           for (let i =0; i<3; i++){
                               if(this.perList[i]) {
                                   this.perList[i].isTopThree = true;
                               }
                           }
                       }


                }).catch((res) => {
                    console.log(res);
                    this.loading = false;
                });
            },

            loadMore() {
                if(this.loading) return;
                this.loading = true;
                this.$http.get(this.perUrl, {
                    params:{
                        page:this.pageInfo.page,
                        size:this.pageInfo.size,
                        date:this.date
                    }
                }).then((res)=>{
                    let list = res.data.pageInfo ? res.data.pageInfo.list : res.data.list;
                    this.loading = false;

                    this.formatPerStep(list);
                    let length = list.length;

                    //难点
                    this.perList = this.perList.concat(list);
                    if(length < this.pageInfo.size) {
                        this.isFinished = true;
                        this.loading = false;
                        this.$eventBus.$emit('loadComplete:person');
                    } else {
                        this.pageInfo.page ++;
                        this.isFinished = false;
                    }

                }).catch((res) => {
                    this.loading = false;
                });

            },

            giveLike(i){

                var me = this;
                let rowdata = this.perList[i];
                let userInfo = util.session.get('sport-user-info');
                if(rowdata.memberId === userInfo.memberId) {
                    util.session.set('praise-row-data', rowdata);
                    this.$router.push('/praiseList')
                }else {
                    this.$http.post(this.upVoteUrl,
                        {id : this.perList[i].id}
                    ).then((res)=>{
                        if (res.data.code === 0) {
                            if(res.data.data.upVote > 9999){
                                this.perList[i].upVote = 9999 + "+";
                            }else {
                                this.perList[i].upVote = res.data.data.upVote;
                            }
                            this.perList[i].isUpVote = res.data.data.isUpVote;
                        }
                    }).catch((res) => {
                        console.log(res);
                    });
                }
            },
            initEvent() {
                let me = this;
                this.$eventBus.$on('loadMore:person', function () {
                    me.loadMore();
                });
            },

            goOtherHomePage(i){
                let rowData = this.perList[i];
                rowData.rank = i+1;
                let userInfo = util.session.get('sport-user-info');
                util.session.set('rowData',rowData);
                if(userInfo.memberId === rowData.memberId) {
                    this.$router.push({path:'/myHomePage'});
                } else {
                    this.$router.push({path:'/otherHomePage'});
                }
            },

            formatPerStep(array){
                array.forEach(function (item) {
                    if(item.stepCount > 9999){
                        item.formatStep = util.formatNumber(item.stepCount);
                    }
                    if(item.upVote > 9999) {
                        item.upVote = '9999+';
                    }
                })
            },

            findOtherPosition(){
                if(this.rowNo > 0){
                    setTimeout(()=>{
                        var elem = document.getElementById('itemId'+(this.rowNo-1));
                        elem && window.scrollTo(0,elem.offsetTop - elem.offsetHeight);
                    },10)
                    
                }
            }

        },

        mounted() {
            this.initEvent();  
        },
        components:{
            Avatar
        }
    };
</script>
<style>
    .page-infinite-wrapper{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        position:relative;
    }

    .page-infinite-list{
        background: #fff;
    }
    .ys-personcell {
        background: #fff;
        margin-top:10px;
    }
    .ys-personcell .page-infinite-listitem{
        display: -webkit-box;
        display:flex;
        -webkit-align-items: center;
        align-items:center;
        height: 58px;
        border-bottom: solid 1px #eee;
        text-align: center;
        list-style-type: none;
    }
    .ys-personcell .page-infinite-listitem.item-active{
        background: #f9f9f9;
    }
    .ys-personcell .page-infinite-list li:first-child{
        border-top: solid 1px #eee;
    }
    .ys-personcell .ranking{
        width: 22px;
        height: 22px;
        margin-left: 11px;
        color: #262626;
        font-size: 14px;
        line-height: 22px;
        background-size: cover;
    }

     .ys-personcell .top-three-ranking0{
         /*color: #FFFFFF !important;*/
         /*background-image: url("../assets/img/badge01@2x.png");*/
     }
     .ys-personcell .top-three-ranking1{
         /*color: #FFFFFF !important;*/
         /*background-image: url("../assets/img/badge02@2x.png");*/
     }
     .ys-personcell .top-three-ranking2{
         /*color: #FFFFFF !important;*/
         /*background-image: url("../assets/img/badge03@2x.png");*/
     }

     .ys-personcell .per-icon{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 20px;
    }
     .ys-personcell .like{
        display: inline-block;
         margin-left: 12px;
         width: 70px;
         height:58px;
         color: #CCCCCC;
         padding-top:15px;
    }
     .ys-personcell .like span{

         font-size: 12px;
     }
     .ys-personcell .iconfont{
         font-size: 16px;
     }
     .ys-personcell .liked .iconfont{
         color: #FB5E71;
     }
     .ys-personcell .top-three{
         color: #29B6F6;
     }
     .ys-personcell .yousport-like span{
         text-align: left;
     }

    .person-info {
        display: inline-block;
        padding: 0 10px;
        width: 100px;
    }
    .person-info .name{
        text-align: left;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .person-info .depName{
        font-size: 12px;
        color: #9E9E9E;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
     .ys-personcell .walking-number{
         font-size: 21px;
         text-align: right;
         min-width: 70px;
         margin-left: 10px;
    }
     .ys-personcell .page-infinite-loading{
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
     .ys-personcell .page-infinite-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
</style>
